<template>
  <div>
    <header>
      <div class="head">
        <span>北京</span>
        <span>试试搜：呷哺呷哺</span>
      </div>
      <!-- 轮播图 -->
      <swiper autoplay indicator-dots circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <navigator :url="`/pages/index/detail?id=${item.id}`">
            <img :src="item.picUrl" alt="" mode="widthFix" />
          </navigator>
        </swiper-item>
      </swiper>
    </header>
    
    <!-- 分类 -->
    <section class="category">
      <navigator 
      :app-id="item.appId" 
      :path="item.appLink"
      :target="item.appId?'miniProgram':''" 
      v-for="(item, index) in items" 
      :key="index">
        <img :src="item.img" alt="" mode="widthFix">
        <span>{{item.name}}</span>
      </navigator>
    </section>
    <!-- 热门品牌 -->
    <Hotbrands/>
    <!-- 限时特惠 -->
    <Sale/>
    <!-- 美食热点 -->
    <HotFood/>
    <!-- 附近餐厅 -->
    <RestaurantNearby/>
  </div>
</template>

<script>
import { getBanner, getFunctionWidget,getfiltercontent,getoperatList } from "@/service";
import RestaurantNearby from "@/components/RestaurantNearby";
import Vue from 'vue'
import Sale from '../../components/Sale'
import HotFood from "../../components/HotFood"
import Hotbrands from '@/components/hotbrands/index'

export default {
  name: 'Index',
  data() {
    return {
      banner: [],
	    items: [],
      lists:[],
      filtercontent:null
    };
  },
  components:{
     RestaurantNearby,
    HotFood,
    Sale,
    Hotbrands
  },
  async onShow() {
    // 获取banner
    var result = await getBanner();
    if (result.errNo === 0) {
      this.banner = result.data;
    }
    // 获取火爆餐厅
    result = await getFunctionWidget();
    if (result.errNo === 0) {
      this.items = result.data.items;
    }
    // 获取附近餐厅头部筛选列表
    result = await getfiltercontent();
    if( result.errNo === 0 ){
        this.filtercontent = result.data
        Vue.prototype.$EventBus.$emit("getfiltercontent",result.data)
    }
    // 获取火爆餐厅
    result = await getFunctionWidget();
    if (result.errNo === 0) {
      this.items = result.data.items;
    }
    // 限时特惠
    result=await getoperatList()
    if(result.errNo===0){
      this.lists=result.data[1].items64
    // console.log(this.lists);

    }
  },
};
</script>

<style lang="scss" scoped>

header {
  width: 100%;
  padding-top: 50rpx;
  background: linear-gradient(180deg, rgb(243, 18, 18), rgb(241, 71, 71), white);
}
header > div:first-child {
  height: 60rpx;
  line-height: 60rpx;
}
.head{
  height: 50rpx;
  line-height: 50rpx;
}
.head>span:nth-child(1){
  color: #faf0f1;
  padding-left: 50rpx;
}
.head>span:nth-child(2){
  width: 420rpx;
  height: 60rpx;
  background: #ed6964;
  margin-left: 60rpx;
  color: #faf0f1;
  font-size: 24rpx;
  padding: 10rpx 80rpx;
  border-radius: 36rpx;
}
swiper {
  height: 225rpx;
  width: 90%;
  border-radius: 20rpx;
  overflow: hidden;
  margin: 50rpx 5% 20rpx;
}
swiper img {
  width: 100%;
  height: 225rpx;
}
.category {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.category navigator {
  width: 25%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category img {
  width: 60%;
}
</style>
